/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/11/15
 */

import React from 'react';
import PropTypes from 'prop-types';
import queryString from 'query-string';
import { List, OperationBoard, EditModal } from './components';
import { routerRedux } from 'dva/router';
import { Page } from 'components';
import { connect } from 'dva';

class Member extends React.Component {
  static propTypes = {
    member: PropTypes.object,
    location: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
  };

  render () {
    const { loading, location, member, dispatch } = this.props;
    location.query = queryString.parse(location.search);
    const { list, pagination, editModal } = member;
    const listProps = {
      dataSource: list,
      loading: loading.effects['member/loadMembers'],
      pagination,

      onChange (_pagination) {
        const { query, pathname } = location;
        dispatch(routerRedux.push({
          pathname,
          query: {
            ...query,
            current: _pagination.current,
            pageSize: _pagination.pageSize,
          },
        }));
      },

      onEditItem (record) {

        dispatch({
          type: 'member/openEditModal',
          payload: {
            modalType: 'update',
            id: record.id,
          },
        });
      },

      onDeleteItem (id, record) {
        console.log('dispatch to delete');
      },

    };

    const modalProps = {
      item: editModal.modalType === 'create' ? {} : editModal.info,
      visible: editModal.visible,
      maskClosable: false,
      // confirmLoading: loading.effects['user/update'],
      title: `${editModal.modalType === 'create' ? '新增用户' : '修改用户'}`,
      wrapClassName: 'vertical-center-modal',
      onConfirm (data) {
        // todo save user
      },
      onCancel () {
        dispatch({ type: 'member/hideEditModal' });
      },
    };

    return (
      <Page inner>
        <OperationBoard />
        <List {...listProps} />
        {editModal.visible && <EditModal {...modalProps} />}
      </Page>
    );
  }
}

export default connect(({ loading, member }) => ({ loading, member }))(Member);
